<script setup>
import { ref } from "vue";
import { Close, ChatDotSquare } from "@element-plus/icons-vue";

import { updateDeviceStatus } from "@/api/device";

const STATUS_OPT = [undefined, "dev-good", "dev-warning", "dev-break", "dev-error"]

const props = defineProps({
  selected: {
    type: Boolean,
    default: false
  },
  status: {
    type: Number,
    default: 3
  },
  data: {
    type: Object
  }
})

const emits = defineEmits(["closeClick", "readLog"])

const changeLoading = ref(false)

function statusChange(value) {
  changeLoading.value = true
  updateDeviceStatus(props.data.no, value).then(res => {
    if (res.code !== 200) {
      props.data.disabled = !value
      ElMessage.error(res.msg)
    }
  }).catch(err => {
    console.log(err)
    props.data.disabled = !value
    ElMessage.error("网络异常，修改失败")
  }).finally(() => changeLoading.value = false)
}
</script>

<template>
  <el-card shadow="hover" :class="{ selected: props.selected }">
    <template #header>
      <div class="card-header">
        <div>
          <div :class="['dev-status', props.status ? STATUS_OPT[props.status] : 'dev-break']" />
          <span>{{ props.data.name }}</span>
        </div>
        <div>
          <el-button class="icon-btn" text @click.stop="e => emits('readLog', e)">
            <template #icon>
              <el-icon :size="20"><ChatDotSquare /></el-icon>
            </template>
          </el-button>
          <el-button class="icon-btn" text @click.stop="e => emits('closeClick', e)">
            <template #icon>
              <el-icon :size="20"><Close /></el-icon>
            </template>
          </el-button>
        </div>
      </div>
    </template>
    <el-descriptions :column="1">
      <el-descriptions-item label="设备编号：">{{ props.data.no }}</el-descriptions-item>
      <el-descriptions-item label="设备状态：">
        <el-switch 
          size="large"
          active-text="禁用"
          inactive-text="启用"
          style="--el-switch-on-color: #DCDFE6; --el-switch-off-color: #409EFF"
          inline-prompt
          :width="56"
          :loading="changeLoading"
          @change="statusChange"
          @click.stop
          v-model="props.data.disabled" 
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-button + .el-button {
  margin-left: 4px;
}
:deep(.el-card__header) {
  padding: 12px 12px 12px 18px;
}
.selected {
  border: 2px solid var(--el-color-primary);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.dev-status {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  &::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    opacity: .35;
    animation: breath 1.2s ease-in-out .5s infinite alternate;
  }
}
.dev-good {
  background-color: #67c23a;
  &::after {
    background-color: #67c23a;
  }
}
.dev-warning {
  background-color: #e6a23c;
  &::after {
    background-color: #e6a23c;
  }
}
.dev-break {
  background-color: #909399;
  &::after {
    background-color: #909399;
  }
}
.dev-error {
  background-color: #f56c6c;
  &::after {
    background-color: #f56c6c;
  }
}
@keyframes breath {
  0%   { opacity: .3; }
  100% { opacity: .0; }
}
</style>
